"3D hover plane effect"
Bootstrap 4.0.0 Snippet by Siddharth Panchal

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>3D Hover Plane Efect</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="card"> <div class="card-content"> <h1 class="text-white text-shadow">Just hover around</h1> <p class="text-shadow"><small><span class="text-white">by:</span> <a href="#">Siddharth Panchal</a></small></p> <p class="related text-white text-shadow"><strong>See also: </strong><a href="https://codepen.io/ariona/details/LVZLGP/" target="_blank">Staged dropdown animation</a></p> </div> </div> </body> </html>
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700); body{background: #edf2f4;perspective: 1000px;transform-style: preserve-3d;display: flex;height: 100vh;font-family: "Playfair Display",georgia,serif;} .text-white{color: #fff;} .text-shadow{text-shadow:1px 1px 1px #000;} .card{pointer-events: none;transform: translateZ(0);padding: 30px;background: url(http://unsplash.it/600/400?image=89);border-radius: 5px;width: 400px;height: 200px;margin: auto;transform-style: preserve-3d;backface-visibility: hidden;display: flex;box-shadow: 0 0 5px rgba(0,0,0,.1);position: relative;} .card:after{content:" ";position: absolute;width: 100%;height: 10px;border-radius: 50%;left:0;bottom:-50px;box-shadow: 0 30px 20px rgba(0,0,0,.3);} .card-content{margin: auto;text-align:center;transform-style: preserve-3d;} h1{transform: translateZ(100px);} p{transform: translateZ(50px);display: block;} card.related{transform: translateZ(80px);font-style: italic;} a{color:#69c6b8;pointer-events: auto;}
$(document).ready(function(){ var card = $(".card"); $(document).on("mousemove",function(e) { var ax = -($(window).innerWidth()/2- e.pageX)/20; var ay = ($(window).innerHeight()/2- e.pageY)/10; card.attr("style", "transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-webkit-transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-moz-transform: rotateY("+ax+"deg) rotateX("+ay+"deg)"); }); });

Questions / Comments:

awesome...

Shreyas441 () - 6 years ago - Reply 0